<template>
  <div class="rate" @mouseleave="onMouseOut">
    <!-- key只能为string, number, symbol -->
    <div
      :class="{
        circle: true,
        active: currentIdx >= i,
      }"
      v-for="i in 5"
      :key="i"
      @mouseover="onMouseOver(i)"
      @click="onClick(i)"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      clickIdx: -1,
      currentIdx: -1, // 2
      // list: [false, false, false, false, false],
    };
  },
  methods: {
    onMouseOver (i) {
      // 悬停时候记住索引
      this.currentIdx = i;
    },
    onMouseOut () {
      // 移开时恢复点击的索引
      this.currentIdx = this.clickIdx;
    },
    onClick (i) {
      // 点击时候记住索引
      this.clickIdx = i;
    },
  },
}
</script>

<style scoped>
  .circle {
    width: 50px;
    height: 50px;
    border-radius: 9999px;
    border: 1px solid red;
    margin-left: 20px;
    display: inline-block;
  }
  .circle.active {
    background: red;
  }
</style>